<template>
  <div class="app-container">
    <el-card class="box-card">
      <el-container>
        <el-header>
          <h1>我的简历</h1>
        </el-header>
        <el-main>
          <el-form ref="form" :model="form" :rules="rules" label-width="80px">
            <!--  个人基本信息部门-->
            <el-descriptions :column="3" border class="margin-top" size="medium" title="个人基本信息">
              <template slot="extra">
                <el-button size="small" type="primary" @click="handleEdit(true)">编辑</el-button>
              </template>
              <el-descriptions-item>
                <template slot="label">
                  姓名
                </template>
                <span v-if="!edit">{{ form.name }}</span>
                <el-input v-if="edit" v-model="form.name" placeholder="请输入姓名"/>
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  性别
                </template>
                <span v-if="!edit">{{ form.sex }}</span>
                <el-input v-if="edit" v-model="form.sex" placeholder="请输入性别"/>
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  年龄
                </template>
                <span v-if="!edit">{{ form.age }}</span>
                <el-input v-if="edit" v-model="form.age" placeholder="请输入年龄"/>
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  学校
                </template>
                <span v-if="!edit">{{ form.school }}</span>
                <el-input v-if="edit" v-model="form.school" placeholder="请输入学校"/>
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  专业
                </template>
                <span v-if="!edit">{{ form.major }}</span>
                <el-input v-if="edit" v-model="form.major" placeholder="请输入专业"/>
              </el-descriptions-item>
            </el-descriptions>

            <!--能力部分-->
            <el-descriptions :column="2" border class="margin-top" size="medium" title="个人能力">
              <el-descriptions-item label="班级职位">
                <span v-if="!edit"> {{ classPositionFormat(form.classPosition) }} </span>
                <el-radio-group v-if="edit" v-model="form.classPosition">
                  <el-radio
                    v-for="dict in classPositionOptions"
                    :key="dict.dictValue"
                    :label="dict.dictValue"
                  >{{ dict.dictLabel }}
                  </el-radio>
                </el-radio-group>
              </el-descriptions-item>
              <el-descriptions-item label="学校职位">
                <span v-if="!edit"> {{ schoolPositionFormat(form.schoolPosition) }} </span>
                <el-radio-group v-if="edit" v-model="form.schoolPosition">
                  <el-radio
                    v-for="dict in schoolPositionOptions"
                    :key="dict.dictValue"
                    :label="dict.dictValue"
                  >{{ dict.dictLabel }}
                  </el-radio>
                </el-radio-group>
              </el-descriptions-item>
              <el-descriptions-item label="校外职位">
                <span v-if="!edit"> {{ outsideSchoolPositionFormat(form.outsideSchoolPosition) }} </span>
                <el-radio-group v-if="edit" v-model="form.outsideSchoolPosition">
                  <el-radio
                    v-for="dict in outsideSchoolPositionOptions"
                    :key="dict.dictValue"
                    :label="dict.dictValue"
                  >{{ dict.dictLabel }}
                  </el-radio>
                </el-radio-group>
              </el-descriptions-item>
              <el-descriptions-item label="英语能力">
                <span v-if="!edit"> {{ englishAbilityFormat(form.englishAbility) }} </span>
                <el-radio-group v-if="edit" v-model="form.englishAbility">
                  <el-radio
                    v-for="dict in englishAbilityOptions"
                    :key="dict.dictValue"
                    :label="dict.dictValue"
                  >{{ dict.dictLabel }}
                  </el-radio>
                </el-radio-group>
              </el-descriptions-item>
              <el-descriptions-item label="奖学金">
                <span v-if="!edit"> {{ scholarshipFormat(form.scholarship) }} </span>
                <el-select v-if="edit" v-model="form.scholarship" clearable placeholder="奖学金种类" size="small">
                  <el-option
                    v-for="dict in scholarshipOptions"
                    :key="dict.dictValue"
                    :label="dict.dictLabel"
                    :value="dict.dictValue"
                  />
                </el-select>
              </el-descriptions-item>
              <el-descriptions-item label="C刊数量">
                <span v-if="!edit">{{ form.cPaper }}</span>
                <el-input v-if="edit" v-model="form.cPaper" placeholder="请输入C刊数量"/>
              </el-descriptions-item>
              <el-descriptions-item label="核心期刊数量">
                <span v-if="!edit">{{ form.corePaper }}</span>
                <el-input v-if="edit" v-model="form.corePaper" placeholder="请输入核心期刊数量"/>
              </el-descriptions-item>
              <el-descriptions-item label="课题">
                <span v-if="!edit"> {{ subjectFormat(form.subject) }} </span>
                <el-select v-if="edit" v-model="form.subject" clearable placeholder="课题" size="small">
                  <el-option
                    v-for="dict in subjectOptions"
                    :key="dict.dictValue"
                    :label="dict.dictLabel"
                    :value="dict.dictValue"
                  />
                </el-select>
              </el-descriptions-item>
              <el-descriptions-item label="专利">
                <span v-if="!edit">{{ form.patent }}</span>
                <el-input v-if="edit" v-model="form.patent" placeholder="请输入专利"/>
              </el-descriptions-item>
              <el-descriptions-item label="比赛获奖">
                <span v-if="!edit"> {{ winnerTypeFormat(form.winner) }} </span>
                <el-select v-if="edit" v-model="form.winner" clearable placeholder="比赛获奖" size="small">
                  <el-option
                    v-for="dict in winnerTypeOptions"
                    :key="dict.dictValue"
                    :label="dict.dictLabel"
                    :value="dict.dictValue"
                  />
                </el-select>
              </el-descriptions-item>
              <el-descriptions-item label="获奖次数">
                <span v-if="!edit">{{ form.winnerCount }}</span>
                <el-input v-if="edit" v-model="form.winnerCount" placeholder="请输入获奖次数"/>
              </el-descriptions-item>
            </el-descriptions>

            <!--实习经历-->
            <div class="description-title margin-top">实习经历</div>
            <div class="margin-top">
              <p v-if="!edit">{{ form.internship }}</p>
              <el-input v-if="edit" v-model="form.internship" placeholder="请输入内容" type="textarea"/>
            </div>

            <!--股票安全性-->
            <el-descriptions :column="1" border class="margin-top" size="medium" title="股票安全性">
              <el-descriptions-item label="导师背书">
                <span v-if="!edit"> {{ endorsementFormat(form.endorsement) }} </span>
                <el-radio-group v-if="edit" v-model="form.endorsement">
                  <el-radio
                    v-for="dict in endorsementOptions"
                    :key="dict.dictValue"
                    :label="dict.dictValue"
                  >{{ dict.dictLabel }}
                  </el-radio>
                </el-radio-group>
              </el-descriptions-item>
              <el-descriptions-item label="保证金缴纳">
                <span v-if="!edit"> {{ marginFormat(form.margin) }} </span>
                <el-select v-if="edit" v-model="form.margin" clearable placeholder="请选择保证金缴纳" size="small">
                  <el-option
                    v-for="dict in marginOptions"
                    :key="dict.dictValue"
                    :label="dict.dictLabel"
                    :value="dict.dictValue"
                  />
                </el-select>
              </el-descriptions-item>
            </el-descriptions>

            <!--证明材料-->
            <div class="description-title margin-top">证明材料</div>
            <div class="margin-top">
              <el-upload
                :action="upload.url"
                :auto-upload="true"
                :before-remove="beforeRemove"
                :disabled="!edit"
                :file-list="upload.fileList"
                :headers="upload.headers"
                :limit="20"
                :loading="upload.isUploading"
                :on-exceed="handleExceed"
                :on-preview="handlePreview"
                :on-progress="handleFileUploadProgress"
                :on-remove="handleRemove"
                :on-success="handleFileSuccess"
                class="upload-demo"
                multiple>
                <el-button v-if="edit" size="small" type="primary">点击证明材料</el-button>
                <div slot="tip" class="el-upload__tip">上传指标涉及的本人的所有证明材料，必须保证上传信息准确性</div>
              </el-upload>
            </div>
          </el-form>
        </el-main>
        <el-footer>
          <el-button v-if="edit" class="button-save" size="small" type="primary" @click="handleSave">保存</el-button>
        </el-footer>
      </el-container>
    </el-card>
  </div>
</template>

<script>
import {getMyResume, saveResume, updateResume} from "@/api/publish/resume";
import {addSysFile, delSysFile, getSysFile} from "@/api/system/sysFile";
import {getToken} from "@/utils/auth";

export default {
  name: "Resume",
  data() {
    return {
      // 表单参数
      form: {},
      // 可编辑状态
      edit: false,
      // 表单校验
      rules: {},
      // 班级职位字典
      classPositionOptions: [],
      // 学校职位字典
      schoolPositionOptions: [],
      // 学校职位字典
      outsideSchoolPositionOptions: [],
      // 英语能力字典
      englishAbilityOptions: [],
      // 奖学金字典
      scholarshipOptions: [],
      // 课题字典
      subjectOptions: [],
      // 导师背书字典
      endorsementOptions: [],
      // 保证金缴纳字典
      marginOptions: [],
      // 比赛获奖
      winnerTypeOptions: [],
      // 上传参数
      upload: {
        // 是否禁用上传
        isUploading: false,
        // 设置上传的请求头部
        headers: {Authorization: "Bearer " + getToken()},
        // 上传的地址
        url: process.env.VUE_APP_BASE_API + "/common/upload",
        // 上传的文件列表
        fileList: []
      },
    }
  },
  created() {
    this.getResume();
    this.getDicts("has_status").then(response => {
      this.classPositionOptions = response.data;
    });
    this.getDicts("has_status").then(response => {
      this.schoolPositionOptions = response.data;
    });
    this.getDicts("has_status").then(response => {
      this.outsideSchoolPositionOptions = response.data;
    });
    this.getDicts("ability_status").then(response => {
      this.englishAbilityOptions = response.data;
    });
    this.getDicts("scholarship").then(response => {
      this.scholarshipOptions = response.data;
    });
    this.getDicts("subject").then(response => {
      this.subjectOptions = response.data;
    });
    this.getDicts("has_status").then(response => {
      this.endorsementOptions = response.data;
    });
    this.getDicts("margin").then(response => {
      this.marginOptions = response.data;
    });
    this.getDicts("winner_type").then(response => {
      this.winnerTypeOptions = response.data;
    });
  },
  methods: {

    // 查询自己的简历
    getResume() {
      const _this = this;
      _this.upload.fileList = [];
      getMyResume().then(async response => {
        if (response && response.code === 200) {
          _this.form = response.data;
          let fileIdArr = _this.form.evidence.split(',');
          for (let i = 0; i < fileIdArr.length; i++) {
            if (fileIdArr[i]) {
              await getSysFile(fileIdArr[i]).then(res => {
                if (res && res.code === 200) {
                  _this.upload.fileList.push({
                    name: res.data.originalFilename,
                    url: res.data.filePath,
                    id: res.data.fileId,
                  })
                }
              })
            }
          }
        }
      })
    },

    // 班级职位字典翻译
    classPositionFormat(value) {
      return this.selectDictLabel(this.classPositionOptions, value);
    },
    // 学校职位字典翻译
    schoolPositionFormat(value) {
      return this.selectDictLabel(this.schoolPositionOptions, value);
    },
    // 学校职位字典翻译
    outsideSchoolPositionFormat(value) {
      return this.selectDictLabel(this.outsideSchoolPositionOptions, value);
    },
    // 英语能力字典翻译
    englishAbilityFormat(value) {
      return this.selectDictLabel(this.englishAbilityOptions, value);
    },
    // 奖学金字典翻译
    scholarshipFormat(value) {
      return this.selectDictLabel(this.scholarshipOptions, value);
    },
    // 课题字典翻译
    subjectFormat(value) {
      return this.selectDictLabel(this.subjectOptions, value);
    },
    // 导师背书字典翻译
    endorsementFormat(value) {
      return this.selectDictLabel(this.endorsementOptions, value);
    },
    // 保证金缴纳字典翻译
    marginFormat(value) {
      return this.selectDictLabel(this.marginOptions, value);
    },
    // 比赛获奖字典翻译
    winnerTypeFormat(value) {
      return this.selectDictLabel(this.winnerTypeOptions, value);
    },

    // 表单重置
    reset() {
      this.form = {
        id: null,
        name: null,
        sex: null,
        age: null,
        school: null,
        major: null,
        classPosition: "0",
        schoolPosition: "0",
        outsideSchoolPosition: "0",
        englishAbility: null,
        scholarship: null,
        paper: null,
        subject: null,
        cPaper: null,
        patent: null,
        corePaper: null,
        winner: null,
        endorsement: null,
        margin: null,
        internship: null,
        deptId: null,
        winnerCount: null,
        createBy: null,
        createById: null,
        createTime: null,
        updateBy: null,
        updateById: null,
        updateTime: null,
        remark: null
      };
      this.resetForm("form");
    },

    // 编辑
    handleEdit(status) {
      this.edit = status;
    },
    // 保存
    handleSave() {
      const _this = this;
      saveResume(this.form).then(res => {
        if (res && res.code === 200) {
          _this.msgSuccess("保存成功");
          setTimeout(() => {
            _this.handleEdit(false);
          }, 1000);
        } else {
          _this.msgError("保存失败");
        }
      })
    },

    handleRemove(file, fileList) {
      const _this = this;
      delSysFile(file.id).then(res => {
        if (res && res.code === 200) {
          _this.msgSuccess("删除附件成功")
          _this.form.evidence = _this.form.evidence.replace(','.concat(file.id), '')
          updateResume({
            id: _this.form.id,
            evidence: _this.form.evidence
          })
        }
      })

    },
    handlePreview(file) {
      console.log(file);
    },
    handleExceed(files, fileList) {
      this.$message.warning(`当前限制选择 20 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },

    // 文件上传中处理
    handleFileUploadProgress(event, file, fileList) {
      this.upload.isUploading = true;
    },
    // 文件上传成功处理
    handleFileSuccess(response, file, fileList) {
      this.upload.isUploading = false;

      const _this = this;
      addSysFile({
        originalFilename: response.originalFilename,
        fileSize: response.size,
        fileName: response.fileName,
        filePath: response.url
      }).then(res => {
        if (res && res.code === 200) {
          _this.form.evidence = _this.form.evidence.concat(',', res.data.fileId);
          _this.msgSuccess("上传成功")
        }
      })
    },
  },


}
</script>

<style scoped>
.app-container {
  background: #F0F2F5;
}

.margin-top {
  margin-top: 20px;
}

.description-title {
  font-size: 16px;
  font-weight: bold;
}

.button-save {
  display: block;
  margin: 20px auto;
}
</style>
